- function hyphenate (path) {
-  return path
-   .replace(/^[A-Z]/, x => x.toLowerCase())
-   .replace(/[A-Z ]/g, x => '-' + x.toLowerCase())
-   .replace(/[^A-Za-z]/g, '-')
-   .replace(/(^-+|-+$)/g, '')
-   .replace(/-{2,}/g, '-')
- }
- const toc = [];

mixin renderToc()
  - const tocSwapBuffer = pug_html;
  - pug_html = '';
  for s in toc
    +tocSection(s.name)
    for sub in s.subs
      +tocSubsection(sub)
  - pug_html = tocSwapBuffer.replace('%%_TOC_%%', pug_html);

mixin tocSection(name)
  li.list__heading
    a.link.blank__link(href="#" + hyphenate(name))=name

mixin tocSubsection(name)
  - var customClass = "{ 'list__link--active': currentPosition === 'sub-" + hyphenate(name) + "' }"
  li.list__element
    a.link.list__link(:class=customClass, href="#sub-" + hyphenate(name))=name


mixin section(name)
  - toc.push({name: name, subs: []})
  .grid__row
    .grid__column
      section(id=hyphenate(name))
        h1.typo__h1=name
        hr.typo__hr
        if block
          block

mixin subsection(name)
  - toc[toc.length - 1].subs.push(name)
  .grid__row
    .grid__column
      h2.typo__h2(id='sub-' + hyphenate(name) data-section)=name
      if block
        block

mixin example(path)
  .example.grid__row
    if block
      block
    .grid__column.grid__unit--md-5
      #{hyphenate(path)}
    .grid__column.grid__unit--md-7
      label.typo__label Code sample
      div
        pre(v-pre).language-javascript
          code=require('!!raw-loader!vue-loader/lib/selector?type=script!examples/' + path + '.vue').replace(/^[\/\n]*/m,'')
      lang-switcher(v-bind:langs="markupLangs" v-bind:current="markupLanguage" v-on:select="selectLanguage")
      div(v-show="markupLanguage === 'pug'")
        pre(v-pre).language-pug
          code=require('!!raw-loader!vue-loader/lib/selector?type=template!examples/' + path + '.vue')
      div(v-show="markupLanguage === 'html'")
        pre(v-pre).language-html
          code=require('!!pug-loader?pretty!vue-loader/lib/selector?type=template!examples/' + path + '.vue')()
